<template>
  <!-- user -->
  <div class="header-user-box">
    <el-dropdown trigger="click" @command="handleCommand">
      <div class="el-dropdown-link">
        <span>{{ name }}</span
        ><i class="iconfont icon-user"></i>
      </div>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item :command="0" v-show="token">Personal info</el-dropdown-item>
        <el-dropdown-item :command="1">Shipping</el-dropdown-item>
        <el-dropdown-item :command="2">Returns</el-dropdown-item>
        <el-dropdown-item :command="3">FAQS</el-dropdown-item>
        <el-dropdown-item :command="4" v-show="!token">Create an Account</el-dropdown-item>
        <el-dropdown-item :command="5" v-show="!token">Sign In</el-dropdown-item>
        <el-dropdown-item :command="6" v-show="token">Sign Out</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </div>
</template>

<script>
import {mapGetters} from 'vuex'
export default {
  data() {
    return {
      name: "Nakey"
    };
  },

  components: {},

  computed: {
		...mapGetters(['token'])
	},

  beforeMount() {},

  mounted() {},

  methods: {
    handleCommand(command) {
			console.log(command)
			switch (command) {
				case 0:
					this.$router.push('/custom/account')
					break;
				case 1:
					this.$router.push('/shipping')
					break;
				case 3:
					this.$router.push('/faqs')
					break;
				case 4:
					this.$router.push('/account')
					break;
				case 5:
					if (this.$route.path === '/login') return;
					this.$router.push('/login')
					break;
				case 6:
					this.$store.dispatch('user/loginOut')
					if (this.$route.path === '/login') return;
					this.$router.push('/login')
					break;
			}
    }
  },

  watch: {}
};
</script>
<style lang="scss" scoped>
.header-user-box {
  // cursor: pointer;
  .el-dropdown-link {
    & > span {
      @media (min-width: 1200px) {
        display: inline-block;
      }
      @media (max-width: 1199px) {
        display: none;
      }
    }

    .iconfont {
      font-size: 24px;
      margin-left: 5px;
    }
  }
}
</style>
